<template>
  <div class="case-page" :id="info?.uuid">
    <div
      style="
        padding: 30px 15px;
        background-color: #fff;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <!-- 医院名称 -->
      <h1
        class="hospital-name"
        style="
          margin-bottom: 5px;
          text-align: center;
          font-size: 16px;
          margin-bottom: 20px;
        "
      >
        {{ info?.title }}
      </h1>
      <h1
        class="hospital-name"
        style="text-align: center; font-size: 16px; margin-bottom: 20px"
      >
        病历
      </h1>

      <!-- 患者基础信息 -->
      <div
        class="patient-info"
        style="
          display: flex;
          flex-wrap: wrap;
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div class="info-item" style="width: 33.33%">
          <span>姓名：</span>{{ info?.patientName }}
          {{
            info?.patientGender == 1
              ? '男'
              : info?.patientGender == 2
              ? '女'
              : '未知'
          }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span>年龄：</span>{{ info?.ageYear }}年{{ info?.ageMonth }}月
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span>电话：</span>{{ info?.phone }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span>科室：</span>{{ info?.deptName }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span>诊号：</span>{{ info?.visitNo }}
        </div>
        <div
          class="info-item"
          style="
            width: 33.33%;
            font-size: 12px;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span>类型：</span> {{ info?.visitType == 1 ? '初诊' : '复诊' }} ({{
            info?.regType == 1 ? '普通' : '急诊'
          }})
        </div>
      </div>

      <!-- 病历核心信息 -->
      <div class="case-info">
        <!-- <div class="info-item">
        <span>主诉</span>：
        <div style="margin-left: 10px">{{ info.mainComplaint }}</div>
      </div>
      <div class="info-item">
        <span>现病史</span>：
        <div style="margin-left: 10px">{{ info.currentHistory }}</div>
      </div>
      <div class="info-item">
        <span>既往史</span>：
        <div style="margin-left: 10px">{{ info.pastHistory }}</div>
      </div>
      <div class="info-item">
        <span>过敏史</span>：
        <div style="margin-left: 10px">{{ info.allergyHistory }}</div>
      </div>
      <div class="info-item">
        <span>最终诊断</span>：
        <div style="margin-left: 10px">{{ info.finalDiagnosis }}</div>
      </div> -->
        <div
          class="info-item"
          v-for="value in info?.fieldList"
          style="
            display: flex;
            width: 100%;
            font-weight: 400;
            font-size: 12px;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span style="text-align-last: justify; width: 50px; display: block">{{
            value.fieldName
          }}</span
          >：
          <div style="margin-left: 10px">{{ value.fieldValue }}</div>
        </div>
      </div>

      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div class="info-item" style="display: flex; width: 100%">
          <span style="width: 50px; display: block">医嘱</span>：
          <ul style="width: calc(100% - 100px); margin-left: 10px">
            <!-- <li v-for="(advice, index) in info.advice" :key="index">
            {{ index + 1 }} .{{ advice }}
          </li> -->
            {{
              info?.doctorAdvice
            }}
          </ul>
        </div>
      </div>
      <div
        class="case-info"
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div class="info-item" style="display: flex; width: 100%">
          <span style="width: 52px">联系电话</span>：
          <div style="margin-left: 5px">{{ info?.phone }}</div>
        </div>
        <div class="info-item" style="display: flex; width: 100%">
          <span style="width: 52px">联系地址</span>：
          <div style="margin-left: 5px">{{ info?.address }}</div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div class="footer" style="display: flex; flex-wrap: wrap">
        <div class="info-item" style="display: flex; width: auto">
          <span style="width: 65px">打印时间：</span>
          <div style="margin-left: 5px">{{ info?.printTime }}</div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div class="footer2" style="width: 180px; margin-left: auto">
        <div
          class="info-item"
          style="
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">医生姓名：</span>
          <div
            class="img"
            v-if="info?.signature"
            style="
              width: 120px;
              height: 40px;
              display: flex;
              justify-content: center;
            "
          >
            <img style="height: 40px" :src="info.signature" alt="" />
          </div>
          <div v-else>{{ info?.doctorName }}</div>
        </div>
        <div
          class="info-item"
          style="display: flex; width: 100%; align-items: center"
        >
          <span style="display: block">完诊日期：</span
          >{{ info?.diagnosisDate }}
        </div>
      </div>
      <img
        :src="qrCodeStr"
        v-if="qrCodeStr != ''"
        style="width: 76px; height: 76px; display: block; margin: 20px auto"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PrintConfig } from '@/utils/print';

const props = defineProps({
  info: {
    type: Object,
    required: false,
  },
});
const qrCodeStr = ref<any>(''); // 明确类型并初始化为 null
const onPrintQRCode = () => {
  //console.log('1111111111111');

  // nextTick(() => {
  //   // 获取dom8元素
  //   const medicalRecordPrint =
  //     document.querySelector('#medicalRecordPrint')?.getHTML() || '';
  //   const html = new DOMParser().parseFromString(
  //     medicalRecordPrint,
  //     'text/html'
  //   );
  //   //console.log('二维码生成成功:', html);
  //   if (props.info.visitNo) {
  //     try {
  //       QRCode.toDataURL(
  //         props.info.visitNo,
  //         (err: Error | null, url: string) => {
  //           if (err) {
  //             //console.error('二维码生成失败:', err);
  //             return;
  //           }
  //           qrCodeStr.value = url;
  //         }
  //       );
  //     } catch (err) {
  //       //console.error('二维码生成失败:', err);
  //     }
  //   }
  // });
};
const emit = defineEmits(['onCancel']);
const getHtml = () => {

    // 获取dom9元素
    //console.log(props?.info?.uuid);
    
    // const dom9Element = document.querySelector('#medicalRecordPrint');
    const dom9Element = document.getElementById(props?.info?.uuid);
    if (!dom9Element) {
      //console.error('未找到打印元素');
      //ElMessage.error('未找到打印内容');
      return;
    }

    const htmlContent = dom9Element.innerHTML || '';
 

    // 得力801p热敏打印机专用配置
    const printConfig: PrintConfig = {
      content: htmlContent,
      styles: {
        pageSize: 'A5', 
        margin: '0mm',
        customStyles: '',
      },
    };
    return printConfig;
};
defineExpose<{
  onPrintQRCode: () => void;
  getHtml: () => void;
}>({
  onPrintQRCode,
  getHtml,
});
</script>

<style scoped lang="scss">
.case-page {
  font-family: Arial, sans-serif;
  padding: 34px 30px;
  background-color: #fff;
  height: 100%;
}

.hospital-name {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

.patient-info,
.footer {
  display: flex;
  flex-wrap: wrap;
}
.patient-info,
.case-info {
  border-bottom: 2px solid rgba(0, 0, 0, 0.9);
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.info-item {
  font-size: 12px;
  width: 24%;
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.footer {
  .info-item {
    display: flex;
    width: auto;
  }
}
.footer2 {
  width: 180px;
  margin-left: auto;
  .info-item {
    display: flex;
    width: 100%;
    align-items: center;
    span {
      display: block;
    }
    .img {
      width: 120px;
      height: 40px;
      display: flex;
      justify-content: center;
      img {
        height: 40px;
      }
    }

    margin-bottom: 10px;
  }
}
.case-info {
  .info-item {
    display: flex;
    width: 100%;
    span {
      width: 50px;
      display: block;
    }
  }
}
.info-item span {
  text-align: justify;
  text-justify: inter-character;
  text-align-last: justify;
}

ul {
  list-style: none;
  padding: 0;
}
</style>
